<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <style>

       body, ul, li, h2, p 
        {
            margin: 0;
            padding: 0;
        }
        body
        {
           font-size: 12px;
           line-height: 1.5;
        }

        #calendar 
        {
            width: 248px;
            overflow: hidden;
            background: #eaeaea;
            margin: 10px auto;
            padding: 0 0 10px 10px;
        }

        #calendar ul 
        {
            overflow: hidden;
        }

        #calendar li 
        {
            color: #fff;
            float: left;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            background: #424242;
            line-height: 1.3;
            list-style-type: none;
            border: 1px solid #424242;
            margin: 10px 10px 0 0;
            padding: 5px;
        }

        #calendar li.current
        {
            color: #F69;
            background: #fff;
        }

        #calendar li strong 
        {
            display: block;
            font-size: 18px;
        }

        #yjr 
        {
            color: #666;
            background: #f1f1f1;
            border: 1px solid #fff;
            margin: 10px 10px 0 0;
            padding: 5px;
        }

        #yjr h2 
        {
            font-size: 14px;
        }

    </style>
</head>
<body>
<div id="calendar">
    <ul>
        <li class="current"><strong>1</strong>JUN</li>
        <li><strong>2</strong>FEB</li>
        <li><strong>3</strong>MAR</li>
        <li><strong>4</strong>APR</li>
        <li><strong>5</strong>MAY</li>
        <li><strong>6</strong>JAN</li>
        <li><strong>7</strong>JUL</li>
        <li><strong>8</strong>AUG</li>
        <li><strong>9</strong>SEP</li>
        <li><strong>10</strong>OCT</li>
        <li><strong>11</strong>NOV</li>
        <li><strong>12</strong>DEC</li>
    </ul>
    <div id="yjr">
        <h2>
            <strong>1</strong>
            月节日
        </h2>

        <p>元旦：1月1日至3日放假三天。</p>
    </div>
</div>
</body>
</html>

<script>

var arr = ["元旦：1月1日至3日放假三天。",
"春节：2月2日至8日放假7天。",
"妇女节：3月8日妇女节，与我无关。",
"清明节：4月3日至5日放假3天",
"劳动节：4月30日至5月2日放假3天。",
"端午节：6月4日至6日放假3天。",
"小暑：7月7日小暑。不放假。",
"七夕节：8月6日七夕节。不放假。",
"中秋节：9月10日至12日放假3天。",
"国庆节：10月1日至7日放假7天。",
"立冬：11月8日立冬。不放假。",
"艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"]

// 获取所有的li标签
var lis = document.querySelectorAll('li');
// 获取h2中的strong
var strong = document.querySelector('h2 strong');
// 获取p
var p = document.querySelector('p');
 
// 获取单个 li 标签
for (var i = 0;i < lis.length; i++){
  
  // console.log(lis[i])
  // 获取索引值，并把索引值i 作为值存储在单个对象里
  lis[i].index = i;
  lis[i].onmouseover = function(){

    // 清空全部li标签类名
    for (var j = 0; j < lis.length; j++){
        lis[j].className = '';
    }
    // 添加类名
    this.className = 'current';
    
    // 获取对应的月份
    strong.innerHTML = this.index + 1;
    p.innerHTML  = arr[this.index];
  }
// 添加注释
}

</script>